<template>
  <div
    style="
      width: 1015px;
      height: 105px;
      margin-left: 200px;
      top: 25px;
      background-color: rgb(255, 255, 255);
      position: absolute;
    "
  >
    <el-form ref="queryFormRef" :model="QueryData.form">
      <el-form-item prop="titleSql" class="inputSql">
        <el-input
          v-model="QueryData.form.titleSql"
          type="search"
          placeholder="按标题查询"
        />
      </el-form-item>
      <el-form-item prop="dateSql" class="inputSql">
        <el-input
          v-model="QueryData.form.dateSql"
          type="date"
          placeholder="按日期查询"
        />
      </el-form-item>
      <el-form-item prop="publisherSql" class="inputSql">
        <el-input
          v-model="QueryData.form.publisherSql"
          type="search"
          placeholder="按发布者查询"
        />
      </el-form-item>
      <el-button type="primary" class="querybt" @click="req(queryFormRef)"
        >查询☚</el-button
      >
    </el-form>

    <div class="container">
      <ul class="tableheader">
        <li style="color: Navy">公告标题</li>
        <li style="color: Navy">发布者</li>
        <li style="color: Navy">发布时间</li>
      </ul>
      <br />
      <hr />
      <ul v-if="dataRef.length" class="tablebody">
        <li v-for:="item in dataRef">
          <div class="row" style="padding-left: 70px">{{ item.text }}</div>
          <div class="row">{{ item.createBy }}</div>
          <div class="row">{{ item.createTime }}</div>
        </li>
      </ul>
      <p v-else>想好要查找什么了吗?</p>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "@vue/reactivity";
import { test } from "../apis/query/querymessage.js";
const queryFormRef = ref();
let dataRef = reactive([]);
var idnumber = 0;
const req = async (queryFormRef) => {
  await queryFormRef.validate((valid) => {
    //校验表单是否通过
    if (valid) {
      test(QueryData.form).then((response) => {
        var x;
        idnumber = 0;
        for (x in response.data) {
          dataRef[x] = response.data[x];
          idnumber++;
          console.log(idnumber);
          console.log(dataRef[x]);
        }
      });
    }
  });
};

const props = defineProps({
  style: String,
});

const QueryData = reactive({
  form: {
    titleSql: "",
    dateSql: "",
    publisherSql: "",
  },
  rules: {},
});
</script>

<style scoped>
.inputSql {
  width: 150px;
  padding: 50px 30px;
  float: left;
}
.querybt {
  margin: 50px;
  float: left;
}
.container {
  position: absolute;
  width: 1015px;
  height: 595px;
  margin-top: 105px;
  background-color: white;
}
.tableheader li {
  width: 250px;
  padding: 0px 30px;
  float: left;
  font-size: 25px;
  font-weight: 900;
  text-align: left;
}
.tableheader {
  list-style-type: none;
}
.tablebody {
  list-style-type: none;
  float: left;
  text-align: left;
  position: absolute;
  top: 38px;
  left: -40px;
}
li {
  display: flex;
  width: 1015px;
}
li div {
  width: 305px;
  height: 30px;
}
.tablebody li:hover {
  background-color: rgb(230, 245, 245);
}
</style>
